<template>
    <div class="login-container">
        <div class="login-form">
            <h2 style="text-align: center;">登录系统</h2>
            <el-form style="width: 80%;margin: 0 auto;" ref="formRef" :rules="rules" :model="formData">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="formData.name" placeholder="admin" :prefix-icon="User"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="formData.password" type="password" placeholder="123456" @keydown.native.enter="handleLogin" :prefix-icon="Lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100px;margin: 0 auto;" @click="handleLogin">登录</el-button>
                </el-form-item>
            </el-form>

        </div>
    </div>
</template>

<script setup lang="ts">
import { useLoginStore } from '@/store/login';
import { ELComponentInstance } from '@/type/components/element-plus';
import { useRouter } from 'vue-router';
import {User, Lock } from '@element-plus/icons-vue'
import {useUserStore} from '@/store/user'
import { useKeepAliveStore } from '@/store/keepAlive';

const loginStore = useLoginStore()
const userStore = useUserStore()
const keepAliveStore = useKeepAliveStore()

const formRef = ref<ELComponentInstance['formRef']>()

const rules = reactive<ELComponentInstance['formRules']>({
    name:[{required:true,message:'请输入账号',trigger:'blur'}],
    password:[{required:true,message:'请输入密码',trigger:'blur'}],
})

const formData = reactive({
    name:'',
    password:''
})

let timer:any = null
const router = useRouter()
const handleLogin = () => {
    formRef.value?.validate((valid) => {
        if(!valid) return
        if(formData.name == 'admin' && formData.password == '123456'){
            NotifyOk('登录成功！')
            loginStore.setToken('12345')
            //清除菜单、tabs、keepAliveList
            userStore.clearMenuList()
            userStore.updateTab([])
            keepAliveStore.setKeepAliveName([])
            timer = setTimeout(() => {
                router.push('/home')
                clearTimeout(timer)
            },1000)
        }else{
            NotifyError('登录失败，请重试')
        }
    })
}
</script>

<style scoped lang="scss">
.login-container{
    width: 100%;
    height: 100%;
    position: relative;
    background-image:url('@/assets/images/login.jpg') ;
    background-repeat: no-repeat;
    background-size: cover;
    .login-form{
        width: 400px;
        height: 250px;
        background-color: white;
        position: absolute;
        right: 100px;
        top: 200px;
        border-radius: 6px;
        opacity: 0.7;
    }
}
</style>